<template>
  <div>
    <!-- <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-1.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-2.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-3.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-4.png" alt>
          </div>
        </el-col>
      </el-row>
    </div>-->
    <div class="tableDiv">
      <div style="margin-bottom:20px">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleClick">新增</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        class="custom-table"
      ref="multipleTable"
       
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="a" label="客户名称" width="auto"></el-table-column>
        <el-table-column prop="b" label="客户类型" width="auto"></el-table-column>
        <el-table-column prop="c" label="联系方式" width="auto"></el-table-column>
        <el-table-column prop="d" label="客户地址" width="auto"></el-table-column>
        <el-table-column prop="e" label="业务范围" width="auto"></el-table-column>
        <el-table-column prop="f" label="主营业务" width="auto"></el-table-column>
        <el-table-column prop="j" label="主营产品" width="auto"></el-table-column>
        <!-- <el-table-column prop="h" label="状态" width="auto"></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="客户信息" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="70px">
            <el-form-item label="客户名称">
              <el-input v-model="formInline.user1" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInline.user2" placeholder="联系方式"></el-input>
            </el-form-item>
            <el-form-item label="客户类型">
              <el-input v-model="formInline.user3" placeholder="客户类型"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      defaultCheckedKeys: ["2"],
      tableData: [
        {
          id: "1",
          a: "张安然",
          b: "个人",
          c: "15584356052",
          d: "吉林省长春市宽城区万龙",
          f: "无",
          e: "无",
          j: "无"
        },

        {
          id: "2",
          a: "硕速奇食品有限公司",
          b: "企业",
          c: " 0431-87364575",
          d: "吉林省农安县光复大街200号",
          f: "农副产品销售",
          e: "初级",
          j: "日常百货商品，如日用品、文具等"
        },
        {
          id: "3",
          a: "亿恒展食品有限公司",
          b: "企业",
          c: " 0431-82364575",
          d: "吉林省长春市宽城区吾悦广场A2",
          f: "日常百货销售",
          e: "高级",
          j: "日常百货商品，如日用品、文具等"
        },
        {
          id: "4",
          a: "跃津盛食品有限公司",
          b: "企业",
          c: " 0431-84364575",
          d: "吉林省长春市净月开发区明宇广场A2",
          f: "日常百货销售",
          e: "高级",
          j: "日常百货商品，如日用品、文具等"
        },
        {
          id: "5",
          a: "冠远佩食品有限公司",
          b: "企业",
          c: " 0431-87364575",
          d: "吉林省长春市净月开发区明宇广场A2",
          f: "日常百货销售",
          e: "初级",
          j: "日常百货商品，如日用品、文具等"
        },
        {
          id: "6",
          a: "李富贵",
          b: "个人",
          c: "13584356052",
          d: "吉林省德惠市港风小区3单元604",
          f: "无",
          e: "无",
          j: "无"
        },
        {
          id: "7",
          a: "东北玉竹农产品有限公司",
          b: "企业",
          c: " 0431-67364573",
          d: "吉林省长春市净月开发区明宇广场A2",
          f: "农副产品销售",
          e: "初级",
          j: "农产品加工和销售等 农产品 人参、鹿茸"
        },
        {
          id: "8",
          a: "赵怀按",
          b: "个人",
          c: "13504356052",
          d: "吉林省德惠市港风小区2单元304",
          f: "无",
          e: "无",
          j: "无"
        }
      ],
      formInline: {
        user: "",
        user1: "",
        user2: "",
        user3: "",
        region: ""
      }
    };
  },
  mounted(){
    this.$nextTick(() => {
            this.defaultCheckedKeys.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(this.tableData.find(item => {
                    return row == item.id;
                }), true)
            })
        })

  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 100%;
  /* background-color: #fff; */
}
.top-div img {
  width: 100%;
  height: 100%;
}
.tableDiv {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}
</style>


